<template>
	<Dialog :title="dialogTitle" :width="'60%'" v-model="dialogVisible">
		<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
			<el-form-item label="分类" prop="categoryId">
				<el-tree-select v-model="formData.categoryId" placeholder="请选择分类" :data="categoryTree"
					:props="{...defaultProps, label: 'title'}"  node-key="id" :check-strictly="true" multiple show-checkbox default-expand-all />
			</el-form-item>
				<el-form-item label="资源类型" prop="typeId">
					<el-select v-model="formData.typeId" multiple placeholder="请选择资源类型">
						<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CMS_TYPE)" :key="dict.value"
							:label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
			<el-form-item label="文章标题" prop="title">
				<el-input v-model="formData.title" placeholder="请输入文章标题" />
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="文章作者" prop="author">
						<el-input v-model="formData.author" placeholder="请输入文章作者" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="文章来源" prop="source">
						<el-input v-model="formData.source" placeholder="请输入文章来源" />
					</el-form-item>
				</el-col>
			</el-row>
<el-row>
				<el-col :span="24">
					<el-form-item label="外跳链接" prop="link">
						<el-input v-model="formData.link" placeholder="请输入外跳链接" />
						填写后将跳转到该地址
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item label="文章封面" prop="picUrl">
				<UploadImg v-model="formData.picUrl" />
			</el-form-item>
			<el-form-item label="文章简介" prop="introduction">
				<el-input type="textarea" v-model="formData.introduction" placeholder="请输入文章简介" />
			</el-form-item>

			<el-form-item label="文章内容" prop="content">
				<Editor v-model="formData.content" height="150px" />
			</el-form-item>
			<el-form-item label="视频" prop="videoUrl">
				<UploadFile v-model="formData.videoUrl" :fileType="['mp4']" :fileSize="1024" :limit="1"/>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="浏览次数" prop="browseCount">
						<el-input v-model="formData.browseCount" placeholder="请输入浏览次数" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input v-model="formData.sort" placeholder="请输入排序" />
					</el-form-item>
				</el-col>
			</el-row>


			<el-form-item label="状态" prop="status">
				<el-radio-group v-model="formData.status">
					<el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
						:label="dict.value">
						{{ dict.label }}
					</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
	import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
	import { ArticleApi, ArticleVO } from '@/api/cms/article'
	import { CategoryApi, CategoryVO } from '@/api/cms/category'
	import { handleTree, defaultProps } from '@/utils/tree'
	/** 文章 表单 */
	defineOptions({ name: 'ArticleForm' })

	const { t } = useI18n() // 国际化
	const message = useMessage() // 消息弹窗

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	const formData = ref({
		id: undefined,
		categoryId: undefined,
		typeId: undefined,
		title: undefined,
		author: undefined,
		source: undefined,
		picUrl: undefined,
		introduction: undefined,
		browseCount: undefined,
		sort: 0,
		status: 0,
		content: undefined,
		link: undefined,
		videoUrl: undefined,
	})
	const formRules = reactive({
		categoryId: [{ required: true, message: '分类编号不能为空', trigger: 'change' }],
		title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
		// picUrl: [{ required: true, message: '文章封面图片地址不能为空', trigger: 'blur' }],
		// sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
		status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
		content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
	})
	const formRef = ref() // 表单 Ref

	/** 打开弹窗 */
	const open = async (type : string, id ?: number) => {
		dialogVisible.value = true
		dialogTitle.value = t('action.' + type)
		formType.value = type
		resetForm()
		// 修改时，设置数据
		if (id) {
			formLoading.value = true
			try {
				formData.value = await ArticleApi.getArticle(id)
				formData.value.categoryId=formData.value.categoryId.split(",").map(item=>Number(item))
				formData.value.typeId=formData.value.typeId.split(",").map(item=>item+'')
			} finally {
				formLoading.value = false
			}
		}
		getCategoryList()
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	const categoryTree = ref() // 树形结构
	/** 查询分类列表 */
	const getCategoryList = async () => {
		categoryTree.value = []
		const data = await CategoryApi.getCategoryList()
		const root : Tree = { id: 0, title: '全部分类', children: [] }
		root.children = handleTree(data, 'id', 'parentId')
		categoryTree.value.push(root)
	}
	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		await formRef.value.validate()
		// 提交请求
		formLoading.value = true
		try {
			const data = formData.value as unknown as ArticleVO
			if(data.categoryId&&Array.isArray(data.categoryId)){
				data.categoryId=data.categoryId.join(",")
			}
			if(data.typeId&&Array.isArray(data.typeId)){
				data.typeId=data.typeId.join(",")
			}
			if (formType.value === 'create') {
				await ArticleApi.createArticle(data)
				message.success(t('common.createSuccess'))
			} else {
				await ArticleApi.updateArticle(data)
				message.success(t('common.updateSuccess'))
			}
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}

	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			id: undefined,
			categoryId: undefined,
			typeId: undefined,
			title: undefined,
			author: undefined,
			source: undefined,
			picUrl: undefined,
			introduction: undefined,
			browseCount: undefined,
			sort: 0,
			status: 0,
			content: undefined,
			link: undefined,
			videoUrl: undefined,
		}
		formRef.value?.resetFields()
	}
</script>